<template>
  <view class="xui-radio" :style="style" @click="change">
    <image
      class="icon"
      :style="iconStyle"
      v-show="!model"
      :src="$parseOssUrl('/user/selectShop/select.png')"
    />
    <image
      class="icon"
      :style="iconStyle"
      v-show="model"
      :src="$parseOssUrl('/user/selectShop/select_active.png')"
    />
  </view>
</template>

<script>
import { computed } from 'vue'
import { paserStyleStr, typeof2 } from '../utils/index'

export default {
  name: 'XuiRadio',
  props: {
    // 当前状态的值
    value: [String, Number, Boolean],
    modelValue: [String, Number, Boolean],

    // 激活状态的值
    label: [String, Number, Boolean],
    size: {
      type: [String, Number],
      default: 44
    },
    customStyle: {
      type: [String, Object],
      default: ''
    }
  },
  emits: [
    'update:model-value',
    'change',
    'input'
  ],
  setup (props, { emit }) {
    // 是否选中
    const model = computed(() => {
      return (props.modelValue || props.value) === props.label
    })
    const iconStyle = computed(() => {
      const size = props.size || 44
      const style = `width: ${size}rpx; height: ${size}rpx`

      return style
    })
    const style = computed(() => {
      const type = typeof2(props.customStyle)
      if (type === 'object') return paserStyleStr(props.customStyle)
      if (typeof2(props.customStyle)) return props.customStyle

      return props.customStyle
    })

    const change = () => {
      const value = props.modelValue || props.value
      emitChange(value)
    }
    const emitChange = (value) => {
      emit('update:model-value', value)
      emit('change', value)
      emit('input', value)
    }

    return {
      model,
      iconStyle,
      style,

      change
    }
  }
}
</script>

<style lang="scss">
.xui-radio {
  display: inline-block;
  font-size: 0;
  .icon {
    // width: 44rpx;
    // height: 44rpx;
  }
}
</style>
